<html>

<head>
    <title>6-绘制图片</title>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<!-- 
ctx.drawImage(image, dx, dy)
ctx.drawImage(image, dx, dy, dWidth, dHeight)
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

image: 源图对象; 可以是 HTMLImageElement(<img>)、SVGImageElement (<image>)、HTMLVideoElement (<video>)、HTMLCanvasElement (<canvas>)、ImageBitmap、OffscreenCanvas、VideoFrame
-->
<img src="img/cat.png" id="img"><br>
<canvas id="tutorial" width="500" height="500"></canvas>
<img src="img/drawImage.png"><br>
</body>
<script type="text/javascript">
    function draw() {
        var canvas = document.getElementById('tutorial');
        // 检测支持性
        if (!canvas.getContext) return;
        //获得 2d 上下文对象
        var ctx = canvas.getContext("2d");

        // 1 由零开始创建图片

        // var img = new Image();        // 创建一个<img>元素
        // img.src = './img/canvas_create_pattern.png'; // 设置图片源地址

        // // 脚本执行后图片开始装载
        // //参数1：要绘制的img  参数2、3：绘制的img在canvas中的坐标
        // ctx.drawImage(img, 0, 0);

        // // 注意：考虑到图片是从网络加载，如果 drawImage 的时候图片还没有完全加载完成，则什么都不做，个别浏览器会抛异常。
        // // 所以我们应该保证在 img 绘制完成之后再 drawImage。

        // 2 绘制 img 标签元素中的图片
        var img = document.querySelector("#img"); // 200*200
        // ctx.drawImage(img, 0, 0, 200, 200);
        ctx.drawImage(img, 100, 100, 100, 100, 200, 200, 100, 100);
    }
    draw();

    document.querySelector("img").onclick = function () {
        draw();
    }
</script>

</html>